.mci-section-wrap {
  height: 100%;

  .mci-section-nav-content {
    position: sticky;
    top: 0;
    right: 0;
  }

  .mci-section-nav-item {
    cursor: pointer;
    transition: all 0.2s;
    position: relative;

    &:hover {
      color: var(--color-grey-9);
    }

    &::before {
      content: '';
      display: inline-block;
      position: absolute;
      left: 0;
      top: 50%;
      height: 0;
      width: 0;
      transition: all 0.14s ease-in;
      background-color: var(--color-green-6);
      transform: translate(8px, -50%) scale(0.85);
    }

    &.is-active {
      color: var(--color-grey-9);
      font-weight: bold;

      &::before {
        transform: translate(0, -50%) scale(1);
        height: 16px;
        width: 4px;
      }
    }
  }

  .mci-sub-section-nav-item {
    &:hover {
      color: var(--color-grey-9);
    }

    &.is-sub-active {
      color: var(--color-grey-9);
    }
  }

  .mci-section {
    margin-bottom: 16px;
  }

  .mci-section-wrap-content {
    height: 100%;
    // max-width: calc(100% - 140px);
    // overflow 会导致粘性定位失效
    overflow-y: auto;
    overflow-x: hidden;
  }
  .mci-sub-section-item {
    .sub-section-item-title {
      margin-bottom: 8px;
      font-size: 16px;
      line-height: 24px;
      font-weight: 500;
    }
    & + .mci-sub-section-item {
      margin-top: 16px;
    }
  }
}
